<script setup>
import { ref } from 'vue'

const studentData = ref([
  {
    name: '张三',
    id: '12345',
    professionalClass: '软件工程5班',
    college: '信息工程学院',
    divideWork: '前端',
    phone: '123123123',
    memberType: '第一主持人',
    email: '123123@qq.com'
  },
  {
    name: '李四',
    id: '12345',
    professionalClass: '软件工程5班',
    college: '信息工程学院',
    divideWork: '后端数据库',
    phone: '1825478765',
    memberType: '第一主持人',
    email: '123123@qq.com'
  }
])

const teacherData = ref([
  {
    name: '张三',
    title: '教授',
    college: '信息工程学院',
    officePhone: '1825478765',
    phone: '1825478765',
    guidanceTeacherType: '第一指导老师',
    email: '123123@qq.com',
    mainResults: '无'
  },
  {
    name: '李四',
    title: '教授',
    college: '信息工程学院',
    officePhone: '1825478765',
    phone: '1825478765',
    guidanceTeacherType: '第一指导老师',
    email: '123123@qq.com',
    mainResults: '无'
  }
])
// 姓名
// 学号
// 专业班级
// 所在学院
// 项目中的分工
// 手机
// 成员类型
// 电子邮箱

// name
// id
// professional-class
// college
// divide-work
// phone
// member-type
// email

// 姓名
// 职称
// 学院
// 办公电话
// 手机
// 指导教师类型
// 电子邮箱
// 主要成果

// name
// title
// college
// officePhone
// phone
// guidanceTeacherType
// email
// mainResults
</script>

<template>
  <div class="project-members">
    <h3>项目成员</h3>
    <div class="columns">
      <el-table :data="studentData" :border="parentBorder" style="width: 100%">
        <el-table-column type="expand" width="30">
          <template #default="props">
            <div class="member-info">
              <p><span>电子邮箱:</span>{{ props.row.email }}</p>
              <p><span>手机: </span>{{ props.row.phone }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index" width="60" align="center" />
        <el-table-column label="姓名" prop="name" align="center" />
        <el-table-column label="学号" prop="id" align="center" />
        <el-table-column label="专业班级" prop="professionalClass" align="center" />
        <el-table-column label="所在学院" prop="college" align="center" />
        <el-table-column label="项目中的分工" prop="divideWork" align="center" />
        <el-table-column label="成员类型" prop="memberType" align="center" />
      </el-table>
    </div>
    <div class="line-bottom"></div>
    <h3>指导老师</h3>
    <div class="columns">
      <el-table :data="teacherData" :border="parentBorder" style="width: 100%">
        <el-table-column type="expand" width="30">
          <template #default="props">
            <div class="member-info">
              <p><span>电子邮箱:</span>{{ props.row.email }}</p>
              <p><span>主要成果: </span>{{ props.row.mainResults }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index" width="60" align="center" />
        <el-table-column label="姓名" prop="name" align="center" />
        <el-table-column label="职称" prop="title" align="center" />
        <el-table-column label="学院" prop="college" align="center" />
        <el-table-column label="办公电话" prop="officePhone" align="center" />
        <el-table-column label="手机" prop="phone" align="center" />
        <el-table-column label="指导教师类型" prop="guidanceTeacherType" align="center" />
      </el-table>
    </div>
  </div>
</template>

<style lang="less" scoped>
.project-members {
  h3 {
    color: #5d78ff;
    margin-bottom: 30px;
  }
  .line-bottom {
    width: 96%;
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 50px;
  }
  .columns {
    margin-bottom: 30px;
    padding-bottom: 50px;
    // border-bottom: 1px solid #e2e2e2;
    margin-right: 30px;

    .member-info {
      p {
        // margin-bottom: 5px;
        padding: 0 20px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        // background-color: pink;
        border: 1px solid #eeeeee;
        &:first-child {
          border-bottom: 0;
        }

        span {
          // background-color: pink;
          width: 100px;
          display: inline-block;
          border-right: 1px solid #eeeeee;
          margin-right: 20px;
          color: #000;
          font-weight: 700;
        }
      }
    }
  }
}
</style>
